<template>
	<div class="pages">
		<!-- 		<div class="serachBox">
			<u-search placeholder="Search Document Name" v-model="keyword" :showAction="false" bgColor="#fff"></u-search>
		</div> -->
		<mescroll-uni @init="mescrollInit" :top="26" @down="downCallback"  :up="upOption"
			@up="upCallback">
			<view class="items" v-for="(items,index) in dadaList" :key="index" @click="$next('/pages/News/newsDetals',items.id)">
				<view class="itemsContent" v-if="items.type == 0">
					<view class="itemsLeft" @click.stop="$imgShow(items.cover)">
						<image :src="items.cover" mode="" style="width: 100%;height: 100%;" ></image>
					</view>
					<view class="itemsRight">
						<view class="contentBox">
							<view class="itemsRightTxt">
								{{hotLength(items.title,25) || ''}}
							</view>
							<view class="itemsRightDate" v-html="hotLength(items.abstracts,20)">
							</view>
						</view>
						<view class="dateBox">
							<image src="../../static/hour.png" mode=""
								style="width: 30rpx;height: 30rpx;margin-right: 5rpx;">
							</image>
							<span>{{items.createTime | formatter('yyyy-mm-dd')}}</span>
						</view>
					</view>
				</view>
				<!-- 广告内容 -->
				<image :src="items.cover" mode="" style="width: 100%;height: 100%;" v-else @click="this.$imgShow(items.cover)"></image>
			</view>
		</mescroll-uni>
	</div>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				newUrl:0,//0为新接口1为老接口
				searchKey: '',
				upOption: {
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认10,
				},
				top: "24rpx",
				dadaList: [],
				pager: {
					currentPage: 1,
					maxResultCount: 10
				},
				newType:0,
			}
		},
		onShow() {
			// this.getList()
		},
		onLoad(option) {
			this.newType = JSON.parse(option.data)
			console.log(JSON.parse(option.data),'option');
		},
		methods: {
			upCallback(page) {
				this.pager.currentPage = page.num; //在第几页
				this.pager.maxResultCount = page.size; //展示多少条数据
				this.getList()
			},
			downCallback(page) { // 下拉刷新
				this.mescroll.resetUpScroll();
			},
			timestamp(val) {
				 // 将时间戳字符串转换为 Date 对象
				      const dateObject = new Date(val);
				      // 获取新闻时间戳（以毫秒为单位）
				      const timestamp = dateObject.getTime();
					  // 获取现在时间戳
					  const currentTimestamp = Date.now();
					  let resuiltDate = currentTimestamp - timestamp
					  let date = new Date(resuiltDate)
					  let year = date.getFullYear()
					  let month = date.getMonth() + 1
					  let day = date.getDate()
					  let h = date.getHours()
					  let text = `${h}`
					  console.log(resuiltDate,'现在时间戳');
					  return text
			},
			// 文字超出打点
			hotLength(val,len){
				if ( val.length > len) {
					return `${val.substring(0,len)}...`
				} else {
					return val
				}
			},
			// 获取数据
			async getList() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				const res = await this.$get(`/biz/app/licensingOrNewsPage`, {
					current: this.pager.currentPage,
					size: this.pager.maxResultCount,
					searchKey: this.searchKey,
					type: 0,//0是新闻，其他的是广告
					newType:this.newType//新闻的分类，四大类
				},this.newUrl)
				console.log(res, 'res');
				if (res.data.data.total >= 0) {
					if (this.pager.currentPage == 1) {
						this.dadaList = []
					}
					this.dadaList = this.dadaList.concat(res.data.data.records)
					// data.forEach(items => {
					// 	if(items.newType == this.newsTyps) {
					// 		this.dadaList.push(items)
					// 	} 
					// })
					console.log(this.dadaList,'this.dadaList');
				}
				this.mescroll.endBySize(res.data.data.records.length, res.data.data.total)
			},
		}
	}
</script>

<style>
	.pages {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		/* padding: 26rpx 0; */
		box-sizing: border-box;
		background-color: #F0F0F0;
		padding-bottom: 60rpx;
	}

	.serachBox {
		width: 100%;
		height: 64rpx;
		margin-top: 26rpx;
	}

	.items {
		/* display: flex;
		justify-content: flex-start;

		width: 700rpx;
		height: 240rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin: 0 auto 26rpx;
		padding: 26rpx;
		box-sizing: border-box; */
		/* width: 700rpx; */
		height: 240rpx;
		margin-bottom: 26rpx;
	}
	.itemsContent {
		display: flex;
		justify-content: flex-start;
		
		width: 700rpx;
		height: 240rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin: 0 auto 26rpx;
		padding: 26rpx;
		box-sizing: border-box;
	}
	.itemsLeft {
		width: 240rpx;
		/* height: 200rpx; */
		background: rgba(39, 53, 98, 0.37);
		margin-right: 26rpx;
	}
	.itemsRight {
		width: calc(100% - 264rpx);
	}

	.itemsRightTxt {
		height: 80rpx;
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		/* margin-top: 15rpx; */

	}

	.itemsRightDate {

		font-family: Montserrat;
		font-size: 16px;
		font-weight: 400;
		line-height: 15px;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		margin-top: 15rpx;
	}

	.contentBox {
		width: 100%;
		height: 160rpx;
	}

	.dateBox {
		display: flex;
		align-items: center;
		font-family: Montserrat;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 32rpx;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
	}

	.newsContent {
		width: 100%;
		height: 220rpx;
		background: #2735625E;
		/* margin-top: 38rpx; */
		/* margin: 38rpx 0 38rpx; */
		padding: 0;
		margin: 0;
		border-radius: 0;
		margin-bottom: 26rpx;

	}
</style>